import React, { Component } from 'react';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {Button, Col, Divider, Input, Modal, Row, Space, Table,message} from 'antd';
import {getDefinitions,delDef} from "../api/workflow";
import {Form} from "antd/lib/form";
import  WorkflowDesign from './workflowDesign'
import {Link} from "react-router-dom";
import { withRouter } from "react-router-dom";

class ProcessDef extends Component {
    state = {
        data: [],
        visible:false,
        selectedProc:-1,  //选中的流程id
        deploymentId:-1
    }
    componentDidMount() {
        this.queryData();
    }

    queryData=()=>{
        getDefinitions().then(
            (res) => {
                this.setState({data: res.data});
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }
    //新的流程
    newBPMNDiag=()=>{
        this.props.history.push("/main/tool/newDesigner");
    }
    //查看流程定义
    viewProcDef=()=>{
        if(this.state.selectedProc==-1){
            message.info('请选择一个流程');
            return;
          }
        this.props.history.push("/main/tool/viewProcDef/"+this.state.selectedProc);
    }

    //del流程
    delProcDef=(deploymentId)=>{
        let confirmDel=0;
        const { confirm } = Modal;
        const clearSelectedProc=()=>{
            this.setState({selectedProc: -1, deploymentId:-1});
            this.queryData();
        }

        const  showConfirm=(deploymentId)=> {
            confirm({
                title: 'Do you Want to delete this items',
                icon: <ExclamationCircleOutlined />,
                content: '删除选中的已部署流程',
                onOk() {
                    console.log('OK');
                    delDef(deploymentId).then(
                        (res) => {
                            clearSelectedProc();
                            message.success("删除一条已部署流程")
                            //跳转页面？
                        },
                        (error) => {
                            console.log("get response failed!");
                            message.success("删除流程失败")
                        }
                    );
                },
                onCancel() {
                    console.log('Cancel');
                    confirmDel=0;
                },
            });
        }
        if(this.state.selectedProc==-1){
            message.info('请选择一个流程');
            return;
        }
        showConfirm(deploymentId);
      //  this.props.history.push("/main/tool/viewProcDef/"+this.state.selectedProc);
    }

    render() {
        const columns = [
            {
                title: 'key',
                dataIndex: 'key',
                key: 'key',
            },
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
            },
        ];

        const  rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                if(selected){
                    this.setState({
                        selectedProc: record.id,
                        deploymentId:record.deploymentId
                    });
                }else{
                    this.setState({
                        selectedProc: -1,
                        deploymentId:-1
                    });
                }
            },
        };

        return (
            <>
              <Space>
                  <Button onClick={this.newBPMNDiag}>新增</Button>
                  <Button onClick={this.viewProcDef}>查看</Button>
                  <Button onClick={()=>this.delProcDef(this.state.deploymentId)}>删除</Button>
              </Space>
                <Divider></Divider>
            <h1>
                <Table
                    rowSelection={{
                        type: "radio",
                        ...rowSelection,
                    }}
                    rowKey="id"
                    columns={columns} dataSource={this.state.data}/>
            </h1>

                {/*<Modal*/}
                    {/*width={800}*/}
                    {/*title="流程定义"*/}
                    {/*visible={this.state.visible}*/}
                    {/*cancelText='返回'*/}
                    {/*onCancel={this.cancelModal}*/}
                    {/*footer={null}*/}
                {/*>*/}
                    {/*<WorkflowDesign/>*/}

                {/*</Modal>*/}
            </>
                )
    }
}

export default withRouter(ProcessDef)




